<div class="container-fluid">
  <div class="row">
    <div class="list-toolbar col-xl-12">
      <div class="filter">
        <form class="form-inline">
          <div class="form-group">
            <label for="status">状态</label>
            <select (ngModelChange)="statusChange($account)" [(ngModel)]="model.status" class="form-control form-control-sm" id="status" name="status">
              <option value="">  所有  </option>
              <option *ngFor="let entry of (statusMap | mapKeys)" value="{{entry.key}}">{{entry.value}}</option>
            </select>
          </div>
        </form>
      </div>
      <div class="buttons">
        <button (click)="create()" type="button" class="btn btn-primary btn-with-icon btn-sm">
          <i class="ion-plus-circled"></i>新建
        </button>
      </div>
    </div>
  </div>
  <!-- /.row -->
  <div class="row">
    <div class="card card-block no-border">
      <div class="table-responsive">
        <table class="table table-hover table-striped">
          <thead class="thead-inverse">
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>手机</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of items; let i = index">
            <th scope="row">{{i}}-{{item.id}}</th>
            <td>{{item.name}} <span *ngIf="me.id == item.id">(我)</span> </td>
            <td>{{item.email}}</td>
            <td>{{item.phone}}</td>
            <td>{{item.disabled | modelStatus}}</td>
            <td class="opt">
              <i *ngIf="me.id != item.id" [routerLink]="['/pages/business/account-edit',item.id, {im: true}]" class="ion-edit link"></i>
              <i *ngIf="me.id != item.id" [class.ion-eye-disabled]="!item.disabled" [class.ion-eye]="item.disabled"
                  (click)="disable(item.id)" class="link"></i>

              <i *ngIf="me.id != item.id" (click)="remove(item.id)" class="ion-trash-a link"></i>
            </td>
          </tr>
          </tbody>
        </table>

        <div class="page-container">
          <pagination [totalItems]="totalItems" [(ngModel)]="currentPage"
                      [maxSize]="maxSize" [itemsPerPage]="itemsPerPage" class="pagination-sm"
                      [boundaryLinks]="true" [rotate]="false"
                      (numPages)="numPages = $account" (pageChanged)="pageChanged($account)"
                      previousText="上一页" nextText="下一页" firstText="第一页" lastText="最后页">
          </pagination>
        </div>
      </div>
    </div>
  </div>
</div>
